<template>
  <div style="width: 100%; height: 100%; overflow: visible; ">
    <h3 style="padding: 15px; background-color: #383838; color: #fff; ">问卷清单</h3>
    <a-spin :spinning="loading">
      <div style="padding: 15px; ">
        <p>问卷名称: {{ model.questionTopic }}</p>
        <p>问卷类型: <span v-if="model.questionType === 1">个人问卷</span></p>
        <a-table ref="table" size="middle" :rowKey="(record, index) => index" :pagination="false" bordered
                 :columns="columns" :dataSource="model.appraiserUser">
        <span slot="action" slot-scope="text, record">
          <a-button type="link" v-if="record.appraiseStatus === 1" @click="toAssess(record.assessedId)">查看</a-button>
          <a-button type="link" v-else-if="record.appraiseStatus === 0" @click="goAssess(record.assessedId)">评估</a-button>
        </span>
        </a-table>
      </div>
    </a-spin>
    <div :style="{
          position: 'fixed',
          right: 0,
          bottom: 0,
          width: '100%',
          // borderTop: '1px solid #e9e9e9',
          // padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }">
      <a-button-group style="width: 100%; height: 40px; ">
        <a-button type="link" style="width: 50%; height: 100%; background-color: #E5E5E5; color: #505050"
                  @click="goList">问卷清单
        </a-button>
        <a-button type="link" style="width: 50%; height: 100%; background-color: #E5E5E5; color: #505050"
                  @click="goLogout">退出登录
        </a-button>
      </a-button-group>
    </div>
  </div>
</template>

<script>
import store from '@/store'
import { getAction, postAction } from '@/api/manage'
import { mapActions } from 'vuex'

export default {
  name: "selected-user-list",
  data () {
    return {
      loading: false,
      queryParam: {
        appraiserPhone: '',
        questionId: '',
      },
      model: {
        questionTopic: '',
        questionType: '',
        appraiserUser: [],
      },
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '被评估人姓名',
          align: "center",
          dataIndex: 'assessedName',
        },
        {
          title: '被评估人部门',
          align: "center",
          dataIndex: 'assessedDept',
        },

        {
          title: '分数',
          align: "center",
          dataIndex: 'fenshu',
        },
        {
          title: '评估状态',
          align: "center",
          dataIndex: 'appraiseStatus',
          customRender: function (text) {
            if (text === 0) {
              return '未评估'
            } else if (text === 1) {
              return <span style="color: green;">已评估</span>
            }
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: "center",
        }
      ],
      url: {
        list: '/appraise/getEvaluateObject'
      }
    }
  },
  watch: {
    $route: {
      handler (to, from) {
        //深度监听，同时也可监听到param参数变化
        this.$nextTick(() => {
          this.queryParam.questionId = to.query.questionId
          this.queryParam.appraiserPhone = store.getters.userInfo.mobile
          if (this.queryParam.questionId && this.queryParam.appraiserPhone) {
            this.getList()
          }
        })
      },
      deep: true,
      // 代表在wacth里声明了这个方法之后立即先去执行handler方法
      immediate: true
    }
  },
  methods: {
    getList () {
      this.loading = true
      postAction(this.url.list, this.queryParam).then(res => {
        this.loading = false
        if (!res.success) {
          return this.$message.error(res.message)
        }
        this.model = res.result
      }).catch(() => {
        this.loading = false
      })
    },
    ...mapActions(["Logout"]),
    goList () {
      this.$router.push({ path: '/mobile/own-list' })
    },
    goLogout () {
      const that = this
      that.Logout({}).then(() => {
        // window.location.reload()
        window.location.href = '/360renliceping/mobile/login'
      }).catch(err => {
        that.$message.error('错误')
      })
    },
    toAssess (id) {
      this.$router.push({ path: '/mobile/assessment-answer', query: { questionId: this.queryParam.questionId, assessedId: id } })
    },
    goAssess (id) {
      this.$router.push({ path: '/mobile/start-explain', query: { questionId: this.queryParam.questionId, assessedId: id } })
    }
  }

}
</script>

<style lang="less" scoped>

</style>
